<template>
  <div>
    <!--面包屑-->
    <el-breadcrumb separator-class="el-icon-arrow-right" style="padding-left:10px;padding-bottom:10px;font-size:12px;">
      <el-breadcrumb-item :to="{ path: '/home/:username'}">首页</el-breadcrumb-item>
      <el-breadcrumb-item>个人中心</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="FormBox">
      <el-form ref="form" :model="form" label-width="150px" >

        <el-form-item label="姓名" >
          <el-col :span="10">
            <el-input type="" v-model="form.username" placeholder="请输入您的姓名" ></el-input>
          </el-col>
          <el-col  :span="3">学号</el-col>
          <el-col :span="10">
            <el-input type="number" v-model="form.Stu_ID" placeholder="请输入您的学号" ></el-input>
          </el-col>
        </el-form-item>


        <el-form-item label="用户名" >
          <el-col :span="10">
            <el-input v-model="form.account" placeholder="请输入您的用户名" ></el-input>
          </el-col>
          <el-col  :span="3">密码</el-col>
          <el-col :span="10">
            <el-input type="password" v-model="form.userpassword" placeholder="请输入您的密码" ></el-input>
          </el-col>
        </el-form-item>


        <el-form-item label="年级" >
          <el-col :span="10">
            <el-select v-model="form.Grade" placeholder="请选择您的年级">
              <el-option label="本科生2020级" value="大一"></el-option>
              <el-option label="本科生2019级" value="大二"></el-option>
              <el-option label="本科生2018级" value="大三"></el-option>
              <el-option label="本科生2017级" value="大四"></el-option>
              <el-option label="研究生2020级" value="研一"></el-option>
              <el-option label="研究生2019级" value="研二"></el-option>
              <el-option label="研究生2018级" value="研三"></el-option>
            </el-select>
          </el-col>
          <el-col  :span="3">专业</el-col>
          <el-col :span="10">
            <el-input v-model="form.Class" placeholder="请输入您的专业"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="民族">
          <el-col :span="10">
            <el-select v-model="form.custom" placeholder="请选择您的民族">
              <el-option v-for="item in custom_data" :label="item.name" :value="item.name" :key="item.id"></el-option>
            </el-select>
          </el-col>
        </el-form-item>

        <el-form-item label="性别">
          <el-col :span="6" class="xx">
            <el-radio-group v-model="form.sex">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
          </el-col>
        </el-form-item>



        <!--含确认弹窗的提交按钮-->
        <el-form-item>
          <el-button type="success" @click="onSubmit">提交信息</el-button>
          <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
            height="30%"
            :before-close="handleClose">
            <span>确定修改您的个人信息吗？</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="onConfirm">确 定</el-button>
            </span>
          </el-dialog>
        </el-form-item>

      </el-form>

    </div>
  </div>


</template>

<script>
export default {
  name: "SelfCentre",

  data() {
    return {
      /*民族的json数据*/
      custom_data: [
        {
          "id": "01",
          "name": "汉族"
        },
        {
          "id": "02",
          "name": "蒙古族"
        },
        {
          "id": "03",
          "name": "回族"
        },
        {
          "id": "04",
          "name": "藏族"
        },
        {
          "id": "05",
          "name": "维吾尔族"
        },
        {
          "id": "06",
          "name": "苗族"
        },
        {
          "id": "07",
          "name": "彝族"
        },
        {
          "id": "08",
          "name": "壮族"
        },
        {
          "id": "09",
          "name": "布依族"
        },
        {
          "id": "10",
          "name": "朝鲜族"
        },
        {
          "id": "11",
          "name": "满族"
        },
        {
          "id": "12",
          "name": "侗族"
        },
        {
          "id": "13",
          "name": "瑶族"
        },
        {
          "id": "14",
          "name": "白族"
        },
        {
          "id": "15",
          "name": "土家族"
        },
        {
          "id": "16",
          "name": "哈尼族"
        },
        {
          "id": "17",
          "name": "哈萨克族"
        },
        {
          "id": "18",
          "name": "傣族"
        },
        {
          "id": "19",
          "name": "黎族"
        },
        {
          "id": "20",
          "name": "傈僳族"
        },
        {
          "id": "21",
          "name": "佤族"
        },
        {
          "id": "22",
          "name": "畲族"
        },
        {
          "id": "23",
          "name": "高山族"
        },
        {
          "id": "24",
          "name": "拉祜族"
        },
        {
          "id": "25",
          "name": "水族"
        },
        {
          "id": "26",
          "name": "东乡族"
        },
        {
          "id": "27",
          "name": "纳西族"
        },
        {
          "id": "28",
          "name": "景颇族"
        },
        {
          "id": "29",
          "name": "柯尔克孜族"
        },
        {
          "id": "30",
          "name": "土族"
        },
        {
          "id": "31",
          "name": "达斡尔族"
        },
        {
          "id": "32",
          "name": "仫佬族"
        },
        {
          "id": "33",
          "name": "羌族"
        },
        {
          "id": "34",
          "name": "布朗族"
        },
        {
          "id": "35",
          "name": "撒拉族"
        },
        {
          "id": "36",
          "name": "毛难族"
        },
        {
          "id": "37",
          "name": "仡佬族"
        },
        {
          "id": "38",
          "name": "锡伯族"
        },
        {
          "id": "39",
          "name": "阿昌族"
        },
        {
          "id": "40",
          "name": "普米族"
        },
        {
          "id": "41",
          "name": "塔吉克族"
        },
        {
          "id": "42",
          "name": "怒族"
        },
        {
          "id": "43",
          "name": "乌孜别克族"
        },
        {
          "id": "44",
          "name": "俄罗斯族"
        },
        {
          "id": "45",
          "name": "鄂温克族"
        },
        {
          "id": "46",
          "name": "崩龙族"
        },
        {
          "id": "47",
          "name": "保安族"
        },
        {
          "id": "48",
          "name": "裕固族"
        },
        {
          "id": "49",
          "name": "京族"
        },
        {
          "id": "50",
          "name": "塔塔尔族"
        },
        {
          "id": "51",
          "name": "独龙族"
        },
        {
          "id": "52",
          "name": "鄂伦春族"
        },
        {
          "id": "53",
          "name": "赫哲族"
        },
        {
          "id": "54",
          "name": "门巴族"
        },
        {
          "id": "55",
          "name": "珞巴族"
        },
        {
          "id": "56",
          "name": "基诺族"
        }
      ],

      /*弹窗的属性*/
      dialogVisible: false,
      form: {
        username: '',
        account: '',
        userpassword: '',
        Stu_ID: '',
        sex: '',
        Grade: '',
        Class: '',
        custom: '',
      }
    }
  },
  methods: {
    onSubmit(){
      if( this.form.username !=''
          &&this.form.account !=''
          &&this.form.userpassword !=''
          &&this.form.Stu_ID !=''
          &&this.form.sex !=''
          &&this.form.Grade !=''
          &&this.form.Class!=''
          &&this.form.custom !=''
      ){
        this.dialogVisible = true;
      }else{
        this.$message({
          showClose: true,
          message: '请确认没有未填写信息！',
          type: 'warning'
        });
      }

    },

    /*确认提交的事件处理：将dialogVisible设为false，提交表单数据*/
    onConfirm() {
      this.dialogVisible = false;
      this.$message({
        showClose: true,
        message: '提交成功！',
        type: 'success'
      });
      console.log(this.form.username+this.form.account+this.form.userpassword+this.form.Stu_ID+this.form.sex+this.form.Grade+this.form.Class+this.form.custom);

      var data_json={};

      data_json['account'] = this.form.account;
      data_json['username'] = this.form.username;
      data_json['userpassword'] = this.form.userpassword;
      data_json['Stu_ID'] = this.form.Stu_ID;
      data_json['sex'] = this.form.sex;
      data_json['Grade'] = this.form.Grade;
      data_json['Class'] = this.form.Class;
      data_json['custom'] = this.form.custom;

      /*转化字符串*/
      data_json=JSON.stringify(data_json);

      this.$axios.post(
          'localhost:8088/submit',
          {
            contentType: 'application/json;charset=utf-8',
            data:data_json
          })
          .then(res=>{
            this.$message({
              showClose: true,
              message: '提交成功！',
              type: 'success'
            });
          }).catch(
          function (error) {
            // 请求失败处理
            alert('请求失败！')
          })
    },
    /*点击遮罩层的事件处理*/
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    }
  }
}
</script>

<style scoped>
.FormBox {
  position: absolute;
  width: 600px;
  margin: 20px 100px;
}

.el-form-item{
  /*表单行间距，默认20px太大了*/
  margin-bottom: 15px;
}

</style>
